<template>
	<div class="content_box">
		<p style="height: 30rpx;"></p>
		<div class="search">
			<img src="/static/search.png" alt="">
			<input type="text" placeholder="关键词搜索">
		</div>

		<div class="container">
			<!-- 左边的列表 -->
			<scroll-view class="list-container" scroll-y :scroll-into-view="scrollIntoView" scroll-with-animation>
				<!-- <div v-for="(section, index) in listData" :key="index" :id="`section-${section.letter}`" class="section"> -->
					<!-- <div class="section-header">{{ section.letter }}</div> -->
				<div v-for="(section, index) in listData" :key="index" class="list-item" @click="changeCheck(section, index)">
					{{section.title}}
					<p class="icon" v-if="section.ischeck">
						<u-icon name="checkbox-mark" color="#23AC39" size="20"></u-icon>
					</p>
				</div>
				<!-- </div> -->
			</scroll-view>

			<!-- 右边的索引栏 -->
			<!-- <div class="index-bar">
				<div v-for="(section, index) in listData" :key="index" class="index-item"
					@click="scrollToSection(section.letter)">
					{{ section.letter }}
				</div>
			</div> -->
		</div>

		<div class="anniu_box">
			<div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
				<p class="an" @click="submitBack">确认</p>
				<!-- <p class="text" @click="modelShow = true">未找到相关资质？</p> -->
			</div>
		</div>

		<!-- 发布入库 -->
		<u-popup @close="closeModel" safeAreaInsetBottom :round="12" :show="modelShow" mode="bottom">
		
			<div class="notice_box">
				<div class="title_box">
					<p class="title">完善资质信息</p>
					<p class="close" @click="modelShow = false"><u-icon name="close" color="#ffffff" size="20"></u-icon></p>
				</div>
				<div class="msg">
					<div class="input_box">
						<p class="name">资质名称：</p>
						<p class="input">
							<input type="text" placeholder="请输入资质名称">
						</p>
					</div>
					<p class="an">确认</p>
				</div>
			</div>
		</u-popup>
	</div>
	
</template>

<script>
import { mapState,mapActions } from 'vuex'
import api from '@/api';
import { Debounce } from '@/utils/utils.js'
import Config from '@/config/index.js'
export default {
	data() {
		return {
			scrollIntoView: '', // 用于控制滚动到指定位置
			listData: [],
			modelShow:false,
			param:{
				type:'0',
			},
			checkArr:[],
			isIphoneXnum:0
		};
	},
	methods: {
		...mapActions( ['updateUserZz']),
		scrollToSection(letter) {
			this.scrollIntoView = `section-${letter}`;
		},

		getList(){
			this.$showLoading('加载中...')
			api.user.get_company_label({...this.param}).then(res=>{
				if(res.code == 200){
					uni.hideLoading();
					this.listData = res.data
				}else{
					uni.hideLoading();
					this.$toast(res.msg)
				}
			})
		},

		changeCheck(item,index){
			if(item.ischeck){
				this.$set(this.listData[index],'ischeck',false)
				if(this.checkArr.length){
					this.checkArr = this.checkArr.filter(it => it.id !== item.id);
				}
			}else{
				this.$set(this.listData[index],'ischeck',true)
				this.checkArr.push({
					labelId:item.id,
					type:item.type,
					title:item.title
				})
			}
			console.log(this.checkArr)
			// this.listData[index].ischeck = true
		},

		submitBack(){
			this.updateUserZz(JSON.stringify(this.checkArr))
			uni.navigateBack();
		}
	},
	onLoad(){
		this.getList()
	},
	onShow(){
		uni.getSystemInfo({
			success: (res) => {
				console.log("手机信息res" + res.model);
				let modelmes = res.model;
				if (
					modelmes.search("iPhone 16") != -1 ||
					modelmes.search("iPhone 15") != -1 ||
					modelmes.search("iPhone 14") != -1 ||
					modelmes.search("iPhone 13") != -1 ||
					modelmes.search("iPhone 12") != -1 ||
					modelmes.search("iPhone 11") != -1 ||
					modelmes.search("iPhone X") != -1 ||
					modelmes.search("iPhone XR") != -1 ||
					modelmes.search("iPhone XS") != -1
				) {
					this.isIphoneXnum = 25;
				} else {
					this.isIphoneXnum = 0;
				}
			},
		});
	}
};
</script>

<style lang="scss" scoped>
.content_box{
	.search{
		height: 72rpx;
		border-radius: 100rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding:0 24rpx;
		margin:0 30rpx 30rpx 30rpx;
		border:1px solid #f7f7f7;
		img{
			width: 28rpx;
			height: 28rpx;
		}
		input{
			height: 50rpx;
			margin-left:20rpx;
			font-size:28rpx;
			flex: 1;
		}
	}
}
.container {
	display: flex;
	height: calc(100vh - 150px);
}

.list-container {
	flex: 1;
	overflow-y: auto;
}

.section-header {
	font-size: 32rpx;
	font-weight: bold;
	background: #f7f7f7;
	height: 70rpx;
	line-height: 70rpx;
	padding:0 30rpx;
}

.list-item {
	font-size: 16px;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
	margin:0 30rpx;
	&:last-child{
		border-bottom:none;
	}
	.icon{
		margin-right:30rpx;
	}
}

.index-bar {
	position: fixed;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
}

.index-item {
	font-size: 28rpx;
	text-align: center;
	margin-bottom:10rpx;
	padding-left: 30rpx;
}
.anniu_box{
	width: 100%;
	height: 150rpx;
	.box{
		width: 92%;
		height: 150rpx;
		position: fixed;
		bottom:0;
		left: 0;
		padding:0 30rpx;
		z-index: 100;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.15);
		text-align: center;
		.an{
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(270deg, #62CE73 0%, #23AC39 100%);
			border-radius: 100rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			margin:30rpx auto;
		}
		.text{
			font-size:26rpx;
			color:#23AC39;
		}
	}
}

.notice_box{
	border-radius: 20rpx;
	.title_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 84rpx;
		background: #23AC39;
		border-radius: 20rpx 20rpx 0px 0px;
		padding:0 30rpx;
		.title{
			font-size:34rpx;
			color:#fff;
			font-weight: 500;
		}
	}
	.msg{
		margin:60rpx 30rpx 30rpx 30rpx;
		.input_box{
			display: flex;
			align-items: center;
			font-size:28rpx;
			border-bottom:1px solid #f7f7f7;
			padding-bottom:30rpx;
			.input{
				border:1px solid #f7f7f7;
				padding:15rpx;
				flex: 1;
				border-radius: 10rpx;
				input{
					font-size:28rpx;
				}
			}
		}
		.an{
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(270deg, #62CE73 0%, #23AC39 100%);
			border-radius: 100rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: 500;
			margin:30rpx auto;
		}
	}
}
</style>
